<template>
  <el-dialog
    width="950px"
    title="调度详情"
    :visible.sync="record.dialogVisible"
    :fullscreen="fullscreenFlag"
    :before-close="cancel"
  >
    <i
      class="el-icon-copy-document fullScreenIcon"
      v-if="fullscreenFlag"
      @click="fullSreenFn(false)"
    ></i>
    <i
      class="el-icon-full-screen fullScreenIcon"
      v-else
      @click="fullSreenFn(true)"
    ></i>
    <div>
      <h3>运输计划</h3>
      <el-table
        v-loading="loading"
        :border="true"
        :data="[obj]"
        style="width: 100%; height: auto"
      >
        <el-table-column
          width="100"
          label="发车日期"
          align="center"
          prop="departDate"
        />
        <el-table-column
          width="100"
          label="提货日期"
          align="center"
          prop="pickDate"
        />
        <el-table-column
          width="120"
          label="线路"
          align="center"
          prop="transportLine"
        />
        <el-table-column
          width="100"
          label="供应商"
          align="center"
          prop="supplier"
        />
        <el-table-column
          width="80"
          label="物品数"
          align="center"
          prop="goodsNum"
        />
        <el-table-column
          width="60"
          label="单位"
          align="center"
          prop="goodsUnit"
        />
        <el-table-column
          width="250"
          label="货物尺寸"
          align="center"
          prop="goodsSize"
        />
        <el-table-column
          width="60"
          label="吨位"
          align="center"
          prop="goodsWeight"
        />
        <el-table-column label="备注" align="center" prop="remark" />
        <el-table-column
          width="80"
          fixed="right"
          label="状态"
          align="center"
          prop="carHeight"
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.transport_plan_status"
              :value="scope.row.status"
            />
          </template>
        </el-table-column>
      </el-table>
      <div class="card">
        <el-timeline>
          <el-timeline-item
            icon="el-icon-location-outline"
            type="primary"
            timestamp="发货方"
            placement="top"
          >
            <p>
              发货方姓名：<span class="x2color">{{ obj.deliverName }}</span>
            </p>
            <div class="flex-layout">
              <p>
                发货方电话：<span class="x2color">{{ obj.deliverMobile }}</span>
              </p>
              <p>
                发货方地址：<span class="x2color">{{
                  obj.deliverAddress
                }}</span>
              </p>
            </div>
          </el-timeline-item>
          <el-timeline-item
            icon="el-icon-location-outline"
            type="primary"
            timestamp="收货方"
            placement="top"
          >
            <p>
              收货方姓名：<span class="x2color">{{ obj.arrivalName }}</span>
            </p>
            <div class="flex-layout">
              <p>
                收货方电话：<span class="x2color">{{ obj.arrivalMobile }}</span>
              </p>
              <p>
                收货方地址：<span class="x2color">{{
                  obj.arrivalAddress
                }}</span>
              </p>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
      <h3>司机调度情况</h3>
      <el-table
        :border="true"
        ref="multipleTable"
        :data="driverList"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          width="75"
          label="司机姓名"
          align="center"
          prop="name"
        />
        <el-table-column
          width="80"
          label="车牌号码"
          align="center"
          prop="carName"
        />
        <el-table-column
          width="120"
          label="司机电话"
          align="center"
          prop="mobile"
        />
        <el-table-column
          width="100"
          label="分配数量"
          align="center"
          prop="goodsNum"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          width=""
          label="备注"
          align="center"
          prop="remark"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          width="75"
          label="进度"
          align="center"
          prop="process"
        >
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.transport_task_process"
              :value="scope.row.process"
            />
          </template>
        </el-table-column>
        <el-table-column
          width="60"
          label="跟踪"
          fixed="right"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-view"
              type="text"
              @click="handleDetail(scope.row)"
              >详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="allNumContainer">
        <div></div>
        <h3 class="allNum">汇总：{{ getCount() }}</h3>
      </div>
    </div>
    <TaskDetail
      ref="taskDetail"
      :open="dialogVisible"
      :infoDetail="infoDetail"
      @refresh="refresh"
    ></TaskDetail>
  </el-dialog>
</template>

<script>
import { getAssignPlanDetail, getTransportTask} from "@/api/tms/plan.js";
import TaskDetail from "../../TransportTask/components/taskDetail.vue";
import Driver from "./driver.vue";

export default {
  dicts: ["transport_plan_status", "transport_task_process"],
  data() {
    return {
      fullscreenFlag: false,
      loading: true,
      obj: {},
      driverList: [],
      innerVisible: false,
      dialogVisible: false,
      infoDetail: {},
      id: "",
    };
  },
  props: {
    record: Object,
  },
  watch: {
    "record.dialogVisible": {
      deep: true,
      handler: function (newV, oldV) {
        if (newV) {
          this.getPlanDetailMsg();
        }
      },
    },
  },
  components: {
    Driver,
    TaskDetail,
  },
  methods: {
    refresh() {
      this.dialogVisible = false;
    },
    /** 查看详情 */
    handleDetail(record) {
      this.dialogVisible = true;
      getTransportTask(record.id).then((response) => {
        console.log(response);
        this.infoDetail = response.data;
      });
    },
    /** 获取计划详情 */
    getPlanDetailMsg() {
      getAssignPlanDetail(this.record.id).then((response) => {
        this.obj = response.data;
        if (this.obj.goodsNum == 0) {
          this.obj.goodsNum = "";
        }
        this.driverList = response.data.carTransports || [];
        if (this.driverList) {
          this.driverList.forEach((e) => {
            e.carName = e.carNumber;
            e.name = e.driverName;
            e.mobile = e.driverMobile;
          });
        }
        this.loading = false;
      });
    },
    // 表单隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "success-row";
      } else {
        return "warning-row";
      }
    },
    //汇总货物
    getCount() {
      let allNum = 0;
      this.driverList.forEach((e) => {
        allNum = Number(allNum) + Number(e.goodsNum);
      });
      return allNum;
    },
    cancel() {
      this.$emit("refresh");
    },
    fullSreenFn(e) {
      this.fullscreenFlag = e;
    },
  },
};
</script>

<style lang="scss">
.el-timeline-item__timestamp {
  font-size: 1em !important;
  margin-bottom: 0px !important;
}

.fullScreenIcon {
  position: absolute;
  top: 20px;
  right: 40px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
}

.fullScreenIcon:hover {
  color: #409eff;
}

.allNumContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0px;

  .allNum {
    width: 750px;
    text-align: center;
    font-weight: bold;
    margin-right: 200px;
  }
}

.card {
  margin: 20px 0px;
}

.x2color {
  color: #606266 !important;
}

.flex-layout {
  display: flex;
  align-items: center;

  p {
    width: 400px;
  }
}

.el-timeline-item__timestamp,
.is-top {
  font-size: 1.17em;
  color: #202020;
}

.el-timeline-item__content {
  margin: 20px 0px;
}

.marginView {
  margin: 1em 0;
}

.el-timeline {
  padding: 0px !important;
}
</style>
